<script setup>
import {computed, ref} from 'vue';
import axios from 'axios';
import { showMsg } from '@/views/Util';
import Auth from './Auth.vue';
let props=defineProps(['role','type','title','permission'])
let emits=defineEmits(['submit','close'])
// let arr=ref([])
//   axios.get('/api/role_list').then(res=>{ 
//         if(res.data.status==200){
//             // console.log(res);
//             arr.value = res.data.data;
//         }
//   })
let obj=computed(()=>{
  return props.role;
})
// console.log(props);


function sub(){
  axios.post('/api/add_role',obj.value,{
    headers:{
      "Content-Type":"application/json"
    }
  }).then(res=>{
    if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
  })
    // let a=permit.value.split(',')
    // for (let i = 0; i < a.length; i++) {
    //   let value = a[i];
    //   console.log(value);
      
    // }
  
}

function edit(){
  axios.put('/api/role_update',obj.value,{
    headers:{
      "Content-Type":"application/json"
    }
  }).then(res=>{
    if(res.data.status==200){
            emits('submit');
        }else{
            showMsg(res.data.msg,'warn',2000);
        }
  })
}
</script>

<template>

  <div class="box">
    <div class="title">
      <h3>{{ title }}</h3>
      <img src="../../img/删除.png" alt="" @click="emits('submit')">
    </div>
    <input type="text" placeholder="角色名称" v-model="obj.roleName">
    <input type="text" placeholder="描述" v-model="obj.roleRemark">
    <Auth  v-model:zhi="obj.permitId"></Auth>
  
    <input v-if="type=='new'" type="button" value="提交" @click="sub" class="sub">
    <input v-if="type=='edit'" type="button" value="提交修改" @click="edit" class="sub">
  </div>
</template>

<style scoped>

.box{
  width: 300px;
  height: 280px;
  border: 1px solid #eee;
  position: absolute;
  margin: 10% 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px #eee;
  cursor: pointer;
}
.box>.title{
  width: 280px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.box>.title>h3{
  color: #0aa;
}
.box>.title>img{
  width: 30px;
  height: 30px;
}
.box>input{
  width: 280px;
  height: 30px;
  border: none;
  background-color: #eee;
}
.box>.sub{
  width: 290px;
  height: 30px;
  background-color: #0aa;
  color:#fff;
  border: none;
}
.box .sex{
  width: 280px;
}
select{
  width: 280px;

}

</style>